// 引入vue
import Vue from "vue";
// 引入VueRouter
import VueRouter from "vue-router";
// 引入路由组件
const Login=()=>import("../pages/Login")
const Home = () => import("../pages/Home");
const News = () => import("../pages/Home/News");
const Music = () => import("../pages/Home/Music");
const Games = () => import("../pages/Home/Games");


// 3让Vue使用VueRouter这个插件
Vue.use(VueRouter);
// 4创建路由器对象
export default new VueRouter({
  // 在实例化路由对象配置中书写路由表配置
  routes: [
    { path: "/login", component: Login, name: "login" },
    {
      path: "/home",
      component: Home,
      //在某个路由规则中如果有默认子路由,则在当前路由中不再书写name属性
      //   name: "home",
      children: [
        //在动态的params参数中,如果有可选的,请放在最后,并且添加一个?结尾
        { path: "music/:id/:time?", component: Music, name: "music" },
        { path: "news", component: News, name: "news" },
        /* 二级路由重定向的方式1:redirect也适用于多级路由 */
        // { path: "", redirect: "/home/music" },
        // 二级路由重定向的方式2:默认子路由
        { path: "", component: Music },
        {
          path: "games",
          component: Games,
          name: "games",
          props: (route) => {
            return route.query;
          },
        },
      ],
    },
    /* 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向 */
    { path: "/", redirect: "/home" },
  ],
});
